<template>
  <view class="container">
    <!-- 去程日期文本 -->
    <div class="date-label">去程日期:</div>
    <!-- 表单区域 -->
    <div class="form-field" @click="show = true" style="margin-left: -13px">
      <div class="date-value">{{ selectedDate || "请选择日期" }}</div>
    </div>
    <!-- 日历组件 -->
    <!--        <up-calendar :show="show" @select="selectDate"></up-calendar>-->
    <DatetimePicker
      :show="show"
      @confirm="handleDateConfirm"
      @update:show="onUpdateShow"
    />
    <div style="margin-left: 50px; display: flex">
      <div class="date-label" style="margin-top: 17px">返程日期:</div>
      <div class="form-field" @click="show2 = true">
        <div class="date-value">{{ selectedDate2 || "请选择日期" }}</div>
      </div>
      <Datetime
        :show2="show2"
        @confirm2="handleDateConfirm2"
        @update:show2="onUpdateShow2"
      />
    </div>
  </view>
</template>
<script setup>
import { ref } from "vue";
import DatetimePicker from "@/components/DatetimerPicker.vue";
import Datetime from "@/components/DatetimerPicker2.vue";
import { useFormatDate } from "@/hooks/useFormaDate";
// 控制日历组件的显示状态
const show = ref(false);
const show2 = ref(false);
// 存储选中的日期
const selectedDate = ref("");
const selectedDate2 = ref("");
const emit = defineEmits(["updateDates"]);
// 处理日期选择的函数
const onUpdateShow = (newShowValue) => {
  show.value = newShowValue;
};
const onUpdateShow2 = (newShowValue) => {
  show2.value = newShowValue;
};
let formatDate = ref("");
let formDate2 = ref("");
const handleDateConfirm = (timestamp) => {
  formatDate = useFormatDate(timestamp);
  selectedDate.value = formatDate;
  emit("updateDates", selectedDate, selectedDate2);

  console.log(selectedDate.value);
};
const handleDateConfirm2 = (timestamp) => {
  formDate2 = useFormatDate(timestamp);
  selectedDate2.value = formDate2;
  emit("updateDates", selectedDate, selectedDate2);
  console.log("返程日期" + selectedDate2.value);
};
const sendDatesToParent = () => {
  emit("updateDates", selectedDate.value, selectedDate2.value);
};
</script>
<style>
/* 使用 Flexbox 进行布局 */
.container {
  margin-top: 80px;
  display: flex;
  margin-left: 5px;
  align-items: center;
}
.date-label {
  /* margin-right: 15px; */
  width: 7rem;
  font-size: 16px;
  color: #333;
}
.form-field {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 使父容器高度为视口高度，可根据需要调整 */
  margin-top: 5px;
  margin-left: 14px;
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
  padding: 5px 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 210px; /* 增加表单区域的宽度 */
  background-color: #f9f9f9; /* 背景色，使表单看起来更像输入框 */
  transition: border-color 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
}
.form-field:hover {
  border-color: #007bff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.date-value {
  /*margin-top: 200px;*/
  font-size: 16px;
  color: #777; /* 更深的灰色，使其看起来更像占位符 */
  flex-grow: 1; /* 使文字占据剩余空间 */
}
/* 当有选中日期时，文字颜色恢复正常 */
.date-value:not(:empty) {
  color: gray; /* 正常的文字颜色 */
}
</style>
